<script setup lang="ts">
import { useI18nOpts } from '@/i18n'
import useSetSaveDownloadFilePath from './useSetSaveDownloadFilePath'
const { locale, options } = useI18nOpts()
</script>

<template>
  <div class="settings px-28 mt-8 mx-auto max-w-220 overflow-y-auto" divide="y gray-300">
    <div>
      <b>{{ $t('language') }}：</b>
      <n-dropdown trigger="click" :options="options" @select="newLocale => (locale = newLocale)">
        <n-button>{{ $t('current-lang') }}</n-button>
      </n-dropdown>
    </div>

    <div v-if="$IS_ELECTRON">
      <b>{{ $t('file-save-path') }}：</b>
      <n-button @click="useSetSaveDownloadFilePath">{{ $useUserInfo().saveDownloadFilePath }}</n-button>
    </div>

    <div>
      <b>{{ $t('version-number') }}：</b>
      <div>{{ require('../../../../package.json').version }}</div>
    </div>

    <div>
      <b>……</b>
      <div>……</div>
    </div>
  </div>
</template>

<style scoped>
.settings > div {
  @apply p-3 flex items-center space-x-5 border-dashed;
}
.settings > div > b {
  @apply min-w-32;
}
</style>
